<template>
  <div>
    <Tooltip content="锁屏" placement="bottom" class="lock-screen-btn-con">
      <Icon @click.native="showLockScreenModal = true" type="md-lock" :size="20"></Icon>
    </Tooltip>
    <Modal title="设置锁屏密码" :closable="false" v-model="showLockScreenModal" @keydown.enter.native="handleLockScreenSubmit('form')">
      <Form :model="form" ref="form" :rules="formValidate">
        <FormItem prop="lockScreenPwd">
          <Input type="password" password v-model="form.lockScreenPwd" placeholder="请输入锁屏密码" />
        </FormItem>
      </Form>
      <Button slot="footer" type="primary" @click="handleLockScreenSubmit('form')">锁屏</Button>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "Lockscreen",
  data() {
    return {
      form: {
        lockScreenPwd: ""
      },
      formValidate: {
        lockScreenPwd: [
          { required: true, message: "请输入锁屏密码", trigger: "blur" }
        ]
      },
      showLockScreenModal: false
    };
  },
  methods: {
    handleLockScreenSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$store.commit("lockScreen", true);
          this.$store.commit("setLockScreenPwd", this.form.lockScreenPwd);
          this.$router.push({ name: "lockscreen" });
          this.showLockScreenModal = false;
          this.lockScreenPwd = "";
        }
      });
    }
  }
};
</script>

<style lang="less">
.lock-screen-btn-con .ivu-tooltip-rel {
  height: 64px;
  line-height: 56px;
  i {
    cursor: pointer;
  }
}
</style>
